<template>
  <div id="elsa" v-show="pro=='f02'||pro=='f01'">
    <div class="menu">
      <div class="server menu-text">
        <i class="iconfont icon-sevice"></i>
        <p>客服</p>
      </div>
      <div class="server menu-text shopcar">
         <i class="iconfont icon-shop-cart-"></i>
        <p>购物车</p>
      </div>
      
      <div class="incar menu-text">加入购物车</div>
      <div class="incar buy menu-text">立即购买</div>
    </div>



    <ul class="headerbar">
      <li>
        <router-link to="/typess"
                     :class="'left'">
          <span class="iconfont icon-left" @click="change()"></span>
        </router-link>
      </li>
      <li><img src="../../assets/images/m_hualogo.png"
             alt=""
             class="logo1"></li>
      <li>
        <span class="iconfont icon-menuunfold" @click="display()"></span>
        <ul class="nav"
          v-show="isActive">
        <li>
          <router-link to="/showss"
                       :class="'nav-link'">
            <i class="iconfont icon-sanguohome"></i>
            <span>首页</span>
          </router-link>
        </li>
        <li>
          <router-link to="/typess"
                       :class="'nav-link'">
            <i class="iconfont icon-icon04"></i>
            <span>分类搜索</span>
          </router-link>
        </li>
        <li>
          <router-link to="/shopcarss"
                       :class="'nav-link'">
            <i class="iconfont icon-shop-cart-"></i>
            <span>购物车</span>
          </router-link>
        </li>
        <li>
          <router-link to="/myss"
                       :class="'nav-link'">
            <i class="iconfont icon-i-smile"></i>
            <span>我的</span>
          </router-link>
        </li>
      </ul>
      </li>
    </ul>
    <!-- 轮播图 -->
    <swiper :options="swiperOption"  ref="mySwiper">
      <!-- 轮播块 -->
      <swiper-slide v-for="(item,index) in content.lunbo"
                    :key="index">
        <router-link to="">
          <img :src="item"
               alt="">

        </router-link>
      </swiper-slide>
      <div class="swiper-pagination"
           slot="pagination"></div>
          
    </swiper>

    <!-- 轮播图 -->

    <div class="content width">
      <div class="title">
        <p class="title-txt">{{content.title}} &nbsp;
          <span class="title-orange">{{content.titleOrange}}</span>
        </p><i class="iconfont icon-starmarkhighligh"></i>
      </div>
      <div class="sale">
        <span class="price-sjg">{{content.priceSjg}}
          <s class="orign-price">{{content.originPrice}}</s>
        </span>
        <span class="saled">{{content.saled}}</span>
      </div>
      <div class="quepon">
        <i class="iconfont icon-shouji"></i>
        <span>{{content.app}}</span>
        <i class="iconfont icon-arrow-right"></i>
      </div>
    </div>
    <div class="details width">
         <p class="detail-item"><span class="detail-left">花语</span><span class="detail-right">{{content.laung}}</span></p>
         <p class="detail-item"><span class="detail-left">材料</span><span class="detail-right">{{content.pei}}</span></p>
         <p class="detail-item"><span class="detail-left">配送</span><span class="detail-right">{{content.local}}</span></p>
         <p class="detail-item"><span class="detail-left">附送</span><span class="detail-right">下单填写留言，即免费赠送精美贺卡！</span></p>
    </div>
    <div class="send width">
      <span class="_width">配送至</span>      
      <i class="iconfont icon-location"></i>
      <p class="area">请选择配送地区</p>
      <p class="juhao">...</p>
    </div>
    <div class="comment">
        <div class="comment-head"><p>订单评价</p>
        <p class="nearby">{{content.nearby}}<i class="iconfont icon-arrow-right"></i></p>
        </div>
    </div>
    <div class="comment-msg">
       <div v-for="(item,index) in content.comments" class="comment-msg-body" v-if="index<3">
            <div class="comment-msg-head ">
              <div>
              <img :src="item.head" alt="" class="head-image">
              <span>{{item.name}}</span>
              </div>
              <span class="star"></span>  
            </div>     
            <p class="comment-margin">{{item.msg}}</p>
            <router-link to="" :class="'comment-margin'"><img :src="item.pic" alt="" class="pic" v-show="item.pic"></router-link>
            <p class="comment-margin">
            <i class="iconfont icon-location"></i>
            <span>{{item.add}}</span>
          </p>
       </div>
    </div>
    <div class="more-comment width">
      <p>查看更多评论</p>
      </div>

      <div class="choose">
      <p class="choose-title">为什么选择我们</p>
      <ul class="advantage">
        <li v-for="(item,index) in adv"
            class="adv-list">
          <img :src="item.pic">
          <p class="adv-txt">{{item.txt}}</p>
        </li>
      </ul>
    </div>
    <div class="txt-img">
      <p>图文详情</p>
    </div>
    <ul>
      <li v-for="(i,index) in content.img" class="imgs" v-show="index<8">
          <img v-lazy="i" alt="">
      </li>
       <li v-for="(i,index) in content.img" class="imgs content-margin" v-show="index>7">
          <img v-lazy="i" alt="">
      </li>
    </ul>
    <ul class="footer">
      <li v-for="(item,index) in company">
        <div class="footer-title">
           <p>{{item.title}}</p>
        </div>         
        <p class="footer-txt">{{item.txt}}</p>
            <img v-lazy="item.img" alt="">
      </li>
    </ul>
  </div>
 
</template>
<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'carrousel',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      isActive: false,
      pro:'',
      content:[],
      lunbo: [],
      comment:[],
      adv:[],
      imgs:[],
      company:[],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
          formatFractionTotal: function (number) {
            var myNum;
            switch (number) {
              case 1:
                myNum = '1'
                break;
              case 2:
                myNum = '2'
                break;
              case 3:
                myNum = '3'
                break;
              default: myNum = number
            }
            return myNum;
          },
        }
      }
    }

  },
  mounted(){
    // console.log(this.$route.params.c);
    this.pro=this.$route.params.c
    this.$http.get('./data/elsa.json').then(res => {
      this.lunbo = res.data.lunbo;
      this.comment=res.data.comments;
      this.imgs=res.data.img
      this.company=res.data.company
    });
    this.$http.get('./data/flower1-details.json').then(res => {
      this.adv = res.data.adv;
    });
    this.$http.get('./data/elsa.json').then(res => {
      var list = res.data.elsa;
      for(var i in list){
        if(this.pro==list[i].id){
          this.content=list[i];
          break;
        }
      }
    });
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
    methods: {
    change () {
      this.$router.go(-1);
    },
    display () {
      this.isActive = !this.isActive
    }
  },

}

</script>

<style scoped>

#elsa {
  background: #F3F5F7;
  padding-bottom: 3.5rem;
}
.content-margin{
  margin-top: 20px;
}
.iconfont {
  font-size: 1.3rem;
  color: #435448;
}
.comment-margin{
      margin-top: 0.85rem;
}
.left {
  font-size: 1rem;
  text-decoration: none;
}
.width{
  margin-bottom: 0.57rem;
  padding: 0.85rem 1.14rem;
  background: white;
}
.headerbar {
  display: flex;
  height: 45px;
  background-color: white;
  padding: 0px 20px 0px 20px;
  align-items: center;
  justify-content: space-between;
}
.logo1 {
  width: 160px;
  display: block;
  margin-top: 5px;
}
.swiper-pagination-fraction {
  width: 2.57rem;
  height: 1.285rem;
  line-height: 1.285rem;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  border-radius: 0.142rem;
  text-align: center;
  left: 87%;
  bottom: 20px;
}

/*----swiper---- */
.swiper-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

.swiper-wrapper {
  height: auto;
}

.swiper-slide img {
  max-width: 100%;
}

.swiper-slide {
  text-align: center;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.router-link-active {
  text-decoration: none;
}
.page {
  position: absolute;
  display: inline-block;
  width: 2.6rem;
  height: 1.286rem;
  line-height: 1.3rem;
  font-size: 0.86rem;
  border-radius: 0.143rem;
  background: rgba(255, 255, 255, 0.7);
  background: red;
  z-index: 9999;
  left: 100px;
}
/*----swiper---- */
.content {
  overflow: hidden;
  font-size: 14px;
}
.title {
  display: flex;
  justify-content: space-between;
}
.title-txt {
  width: 87%;
}
.title-orange {
  color: #ff734c;
}
.sale {
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price-sjg {
  font-size: 1.4rem;
  color: #ff734c;
  font-weight: 600;
}
.orign-price {
  color: #b4babf;
  font-size: 1rem;
  font-weight: 400;
}
.saled {
  font-size: 0.71rem;
}
.quepon {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid #e8ecf0;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.quepon > span {
  width: 79%;
  display: inline-block;
}
.icon-shouji {
  width: 12%;
  display: inline-block;
}
.icon-arrow-right {
  width: 10%;
  display: inline-block;
  font-size: 15px;
}
.details{
  font-size: 0.8rem;
}
.detail-left{
  display: inline-block;
  width: 13%;
}
.detail-right{
  width: 87%;
  display: inline-block;
  border-bottom: 1px solid #dfe3e7;
  padding: 0.8rem 0 0.8rem;
}
/* .details .detail-right:nth-of-type(4n){
   border-bottom:0px;
} */

.send{
  display: flex;
  font-size: 0.8rem;
}
.icon-location{
  font-size: 0.9rem;
  display: inline-block;
  width: 1.2rem;
  margin-top: 3px;
}
.area{
  display: flex;
  font-size: 14px;
  width: 72%;
  align-items: center;
}
.juhao{
  letter-spacing: 2px;
  font-size: 1rem;
}
._width{
  width:13%;
}
.comment-head{
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 1.14rem;
  background: white
}
.nearby{
  font-size: 0.8rem;
  color:#71797F;
}
.comment-msg-body{
  font-size: 0.8rem;
  padding: 0.85rem 1.14rem;
  background: white;
  border-top:1px solid rgb(245, 242, 242)
}
.comment-msg-head{
  display: flex;
  justify-content: space-between;
}
.head-image{
  display: inline-block;
  width:1.42rem;
  height:1.42rem;
  border-radius: 50%;
}
.comment-msg-body>.router-link-active{
  display: block;
  width: 5.7rem;
}
.pic{
  display: block;
  height: 5.7rem;
  width: 100%;
}
.star{
  display: inline-block;
  background: url('../../../data/assets/images/elsa/star5.png');
  background-repeat: no-repeat;
  width: 4.28rem;
  height: 0.64285714rem;
  background-size: contain;
  background-position: center center;

}
.more-comment{
text-align: center;
}
.more-comment>p{
    border:1px solid black;
      display: inline-block;
      font-size: 0.8rem;
      padding:3px 5px;
}

.choose {
  text-align: center;
  background: white;
  margin-bottom: 0.57rem;
}
.choose-title {
  padding: 1.4rem 0rem 1.4rem 0rem;
}
.advantage {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.7rem;
}
.adv-list {
  width: 33.33%;
  padding-bottom: 1.7rem;
}

.adv-list img {
  width: 50%;
}
.txt-img{
  padding:0.8rem 1rem;
  background: white;
}
.imgs{
  width: 100%;
  background: white;
}
.imgs>img{
  width: 100%;
  display: block;
}
.footer{
  padding: 0.85rem 1.14rem;
  background: white;
}
.footer>li{
  width: 100%;

}
.footer>li>img{
  width: 100%;
  margin-top: 1.4rem;
}
.footer-title{
  display: flex;
  justify-content: center;
}
.footer-title>p{
  display: inline-block;
  padding: 1.3rem 1.14rem;
  font-weight: 600;
  font-size: 1.15rem;
  position: relative;
}
.footer-title>p::after{
    content: '';
    position: absolute;
    width: 50px;
    bottom: 13px;
    border-bottom:1px solid lightgrey;
    left: 50%;
    margin-left: -25px;

}
.footer-txt{
  font-size: 0.75rem;
}
.menu{
  display: flex;
  position: fixed;
  background: #F3F5F7;
  z-index: 99;
  width: 100%;
  bottom: 0px;
  height: 3.5rem;
  /* line-height: 3.5rem; */
}
.menu-text{
  text-align: center;
}
.server{
  width: 20%;
  padding:0.5rem 0rem;
}
.shopcar{
   padding-top: 12px;
}
.incar{
  width: 30%;
  background-color: #3D4D42;
  color: #fff;
  font-size: 14px;
  line-height: 3.5rem;
}
.buy{
  background-color: #FF734C;

}
.icon-sevice{
  font-size: 1.6rem;
}

.detail-item{
  display: flex;
  align-items: center;
}
/* 隐藏导航栏 */
  .nav {
    position: absolute;
    background: white;
    right: 10px;
    top: 3rem;
    font-size: 14px;
    border: 1px solid #e9ecf0;
    border-radius: 0.286rem;
    box-shadow: 0 4px 12px 0 #e9ecf0;
    z-index: 100;
    }
    .nav>.iconfont {
      line-height: normal;
      display: inline-block;
      font-size: 1rem;
      margin-right: 0.4rem;
    }
    .nav>li {
      height: 3rem;
      line-height: 3rem;
      padding: 0rem 0.85rem;
    }
    .nav>li>.nav-link {
      text-decoration: none;
      color: black;
    }
     .nav:before {
      content: "";
      width: 6px;
      height: 6px;
      background: white;
      position: absolute;
      transform: rotate(45deg);
      border-left: 1px solid #e9ecf0;
      border-top: 1px solid #e9ecf0;
      top: -5px;
      right: 15px;
    }
  
</style>


